import React from 'react'
import Chart from 'react-apexcharts'
import { Query } from 'react-apollo'
import Loading from 'components/loading'
import getUserWorkTime from 'graphql/project/task/user/userWorkTime.graphql'
import moment from 'moment'
import { Grid, Label } from 'semantic-ui-react'

const getData = () => {
  const result = []
  for (let i = 0; i < 24; i += 1) {
    result.push({ x: `${i}点`, y: 0 })
  }
  return result
}

const getSeriesData = () => {
  const result = []
  for (let i = 0; i < 12; i += 1) {
    result.push({
      name: `${i * 5}-${(i + 1) * 5}分`,
      data: getData(),
    })
  }
  return result
}

export default class HeatmapChart extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      options: {
        chart: {
          stacked: true,
        },
        colors: ['#008FFB', '#FF4560'],
        plotOptions: {
          bar: {
            horizontal: true,
            barHeight: '80%',
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 1,
          colors: ['#fff'],
        },

        grid: {
          xaxis: {
            showLines: false,
          },
        },
        yaxis: {
          min: -5,
          max: 5,
          title: {
            // text: 'Age',
          },
        },
        tooltip: {
          shared: false,
          x: {
            formatter(val) {
              return val
            },
          },
          y: {
            formatter(val) {
              return val
            },
          },
        },
        title: {
          text: '成员工作对比',
        },
        xaxis: {
          categories: [
            '85+',
            '80-84',
            '75-79',
            '70-74',
            '65-69',
            '60-64',
            '55-59',
            '50-54',
            '45-49',
            '40-44',
            '35-39',
            '30-34',
            '25-29',
            '20-24',
            '15-19',
            '10-14',
            '5-9',
            '0-4',
          ],
          title: {
            text: '数量',
          },
          labels: {
            formatter(val) {
              return val
            },
          },
        },
      },
    }
  }

  render() {
    const { options } = this.state
    const {
      name, start, end, pid,
    } = this.props
    const series = [
      {
        name: '任务数',
        data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
          3.9, 3.5, 3
        ]
      },
      {
        name: '标注数',
        data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
          -4.1, -4, -4.1, -3.4, -3.1, -2.8
        ]
      }
    ]
    const variablesFinal = {
      name,
      pid,
      start,
      end,
    }
    return (
      <Query
        query={getUserWorkTime}
        variables={variablesFinal}
        fetchPolicy="network-only"
        notifyOnNetworkStatusChange
      >
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          let workTime = 0
          let workCount = 0
          /* if (data && data.annotation) {
            workCount = data.annotation.length
            data.annotation.map((ann) => {
              const minuteIndex = Math.floor(moment(ann.create_at).get('minute') / 5)
              const hourIndex = moment(ann.create_at).get('hour')
              if (series[minuteIndex].data[hourIndex].y === 0) {
                workTime += 5
              }
              series[minuteIndex].data[hourIndex].y += 1
            })
          } */
          return (
            <Grid>
              <Grid.Row centered columns={1}>
                <Grid.Column>
                  <Chart options={options} series={series} type="bar" height="350" />
                </Grid.Column>
              </Grid.Row>
              <Grid.Row centered columns={3}>
                <Grid.Column textAlign="center">
                  <Label circular style={{ backgroundColor: '#008FFB' }} empty key="red" />
                  {`工作: ${Math.floor(workTime / 60)}小时${workTime
                    % 60}分钟 (标注数量: ${workCount})`}
                </Grid.Column>
              </Grid.Row>
            </Grid>
          )
        }}
      </Query>
    )
  }
}
